<template>
	<view class="jk-page-container bg">
		<jkSearchBar
            :disabled="true"
            :search-val="searchParams.groupName"
            :searchLeftItemName="searchParams.workshopName"
			:searchRightItemName="searchParams.yearMonth"
            searchRightItemNoDataName="年-月"
            placeholder="班组"
            @search="onSearchBtn"
            @click-input="selectGroupPopupOptionState = true"
            @search-left-item="selectWorkshopPopupOptionState = true"
            @search-right-item="showSelectMonthPicker = true"
        ></jkSearchBar>
		<view class="column-list-container margin-top-20">
			<jk-table :height="tableHeight - 120" :table-header="tableHeader" :table-data="tableData"></jk-table>
		</view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            :show-all="false"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <u-datetime-picker
            :show="showSelectMonthPicker"
            v-model="initTimeVal"
            mode="year-month"
            :closeOnClickOverlay="true"
            @confirm="onConfirmOfSelectMonthPicker"
            @close="showSelectMonthPicker = false"
            @cancel="showSelectMonthPicker = false"
        ></u-datetime-picker>
        <jkPopupOption
            :value="searchParams.groupId"
            :show="selectGroupPopupOptionState"
            :optionList="groupList"
            @visible-change="(e) => selectGroupPopupOptionState = e"
            @confirm="onConfirmOfSelectGroup"
        ></jkPopupOption>
	</view>
</template>

<script>
import {
    spinReportFrontPlanGroupYieldTwoReportMonth, personnelGroupPage
} from "../../../api";
    import {
        isLastPage,
        pageConfig,
        showLoading
    } from "../../../utils/jk-utils";
	import jkNoMore from "../../../jk-components/jk-no-more";
	import jkTable from "../../../jk-components/jk-table";
	import jkSearchBar from "../../../jk-components/jk-search-bar";
    import jkPopupOption from "../../../jk-components/jk-popup-option";
	export default {
		components: {
            jkPopupOption,
            jkNoMore,
			jkTable,
			jkSearchBar
		},
		data() {
			return {
                groupList: [],
                selectGroupPopupOptionState: false,
                showSelectMonthPicker: false,
                initTimeVal: '',
				loadLoading: false,
				tableHeader: [],
				apiConfig: {
					list: spinReportFrontPlanGroupYieldTwoReportMonth
				},
				searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					workshopId: '',
					workshopName: '',
                    groupId: '',
                    groupName: '',
                    year: '',
                    month: '',
                    processName: '',
                    yearMonth: '',
				},
				tableData: [],
				workshopList: [],
				windowHeight: 0,
				tableHeight: 0,
                selectWorkshopPopupOptionState: false
			}
		},
		onLoad() {
            this.initTimeVal = Date.now();
            this.setDate(Date.now());
            this.workshopList = getApp().globalData.defaultWorkshop.list;
            if (!this.searchParams.workshopId) {
                // 默认前纺车间
                let workshopItem = this.workshopList.find(x => x.name.indexOf('前纺') !== -1) || {};
                this.$set(this.searchParams, 'workshopId', workshopItem.id || getApp().globalData.defaultWorkshop.id);
                this.$set(this.searchParams, 'workshopName', workshopItem.name || getApp().globalData.defaultWorkshop.name);
            }
            this.getSystemInfo();
            this.getDependentData();
        },
		onShow() {
		},
		methods: {
            onConfirmOfSelectGroup(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'groupId', item.id);
                this.$set(this.searchParams, 'groupName', item.name);
                this.selectGroupPopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectMonthPicker(e) {
                this.setDate(e.value);
                this.showSelectMonthPicker = false;
                this.getListRequest();
            },
            setDate(val) {
                let year = new Date(val).getFullYear();
                let month = new Date(val).getMonth() + 1;
                this.$set(this.searchParams, 'year', year);
                this.$set(this.searchParams, 'month', month);
                this.$set(this.searchParams, 'yearMonth', `${year}-${month < 10 ? `0${month}` : month}`);
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopCode', item.code);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.$set(this.searchParams, 'groupId', '');
                this.$set(this.searchParams, 'groupName', '');
                this.getGroupListRequest();
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			getSystemInfo() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.windowHeight = res.windowHeight;
						_this.tableHeight = res.windowHeight - 0;
					}
				});
			},
			onSearchBtn() {
				this.getListRequest();
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
                if (this.searchParams.workshopId) await this.getGroupListRequest();
                await this.getListRequest();
				showLoading(false);
			},
            getGroupListRequest() {
                if (!this.searchParams.workshopId) return false;
                return personnelGroupPage({
                    auditState: 1,
                    workshopId: this.searchParams.workshopId
                }).then(res => {
                    if (res.data.status === 200) {
                        this.groupList = res.data.res;
                    }
                });
            },
			getListRequest() {
                if (!this.searchParams.workshopId || !this.searchParams.year || !this.searchParams.month) return false;
				showLoading(true);
				this.loadLoading = true;
                this.searchParams.pageNo = 1;
                let params = JSON.parse(JSON.stringify(this.searchParams));
                delete params.groupName;
                delete params.workshopName;
                delete params.workshopCode;
                delete params.processName;
                delete params.totalCount;
                delete params.yearMonth;
                this.tableData = [];
                return this.apiConfig['list'](params).then(res => {
					showLoading(false);
					this.loadLoading = false;
					if (res.data.status === 200) {
						this.$set(this.searchParams, 'totalCount', res.data.count);
						let resData = JSON.parse(JSON.stringify(res.data.res));
                        this.tableHeader = res.data.res.tableHeader ? res.data.res.tableHeader.map(x => {
                            x.title = x.value + '';
                            if (x.key === 'empName') {
                                x.width = '120px';
                                x.align = 'left';
                                x.fixed = 'left';
                            } else if (x.key === 'empTotalSalary') {
                                x.width = '150px';
                                x.align = 'right';
                            } else {
                                x.width = '80px';
                                x.align = 'right';
                            }
                            return x;
                        }) : [];
                        this.tableData = resData.tableData ? resData.tableData.map(x => {
                            return x;
                        }) : [];
						this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
